<!DOCTYPE html>
<html class="x-admin-sm">
<!-- 新建推送页面 -->

<head>
    <meta charset="UTF-8">
    <title>新建推送页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/newStyle.css" rel="stylesheet">
    <!-- 弹窗轻提示 -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <!-- bootstarp弹窗样式 -->
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <!-- 引入jq -->
    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <style>
        body {
            background-color: #f2f2f2;
        }

        .x-nav {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 0.5px;
            height: 50px;
            line-height: 38px;
            background-color: #f3f3f3;
            border: 1px solid #e4e4e4;
            background: #f3f3f3;
        }

        .x-nav .goods_name {
            margin-left: 10px;
            color: #999;
            font-size: 15px;
            display: inline-block;
            margin-top: 5px;
        }

        .goodsRoload {
            margin-top: 6px !important;
            display: inline-block;
            margin-right: 80px;
            height: 32px;
            line-height: 50px;
            width: 80px;
            font-size: #666 !important;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            color: #ccc;
            cursor: pointer;
        }

        .goods_name::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 12px;
            margin: 0 3px;
            background-color: #1abc9c;
        }

        .bgc {
            width: 45px;
            padding: 0;
            background: #f1f1f1;
            position: relative;
            top: 0;
            left: -10px;
            text-align: center;
        }

        .none {
            display: none;
        }

        .layui-row {
            width: 70%;
            height: calc(100% - 15px);
            background-color: #fff;
            margin: 0 auto !important;
            padding: 50px 70px;
        }

        .layui-btn {
            font-size: 13px !important;
            width: 180px !important;
            height: 35 px !important;
            border-radius: 4px !important;
            background-color: rgba(26, 188, 156, 1) !important;
            color: #fff !important;
            margin: 0 auto;
        }

        .layui-input {
            width: 288px !important;
            height: 36px !important;
            background-color: #f2f2f2;
        }

        .layui-textarea {
            width: 688px !important;
            background-color: #f2f2f2;
        }

        .text_title {
            display: inline-block;
            font-size: 14px;
            color: #666;
            position: relative;
            top: 26px;
            left: 30px;
        }

        .note_tem {
            height: 36px;
            line-height: 36px;
            text-align: center;
            width: 188px;
            border: 1px #ccc solid;
            border-radius: 4px;
            color: #666;
            margin-left: 20px;
            cursor: pointer;
        }

        .img_show {
            width: 130px;
            height: 130px;
            border-radius: 5px;
            margin-left: 110px;
            margin-bottom: 10px;
            display: none;
        }

        .img_show img {
            width: 100%;
            height: 100%;
        }

        .upload_img {
            width: 50px !important;
            margin-left: 10px;
            margin-right: 0 !important;
        }

        .de_img {
            display: none;
            /* display: inline-block; */
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: #e76071;
            border-radius: 5px;
            margin-left: 10px;
            cursor: pointer;
            font-size: 13px;
        }

        .send_time {
            font-size: 14px;
            color: #ccc;
            display: inline-block;
            margin-top: 8px;
            margin-right: 10px;
            margin-left: 80px;
        }
        .layui-form-radio {
            margin-top: 4px;
        }
        .submit_btn {
            background-color: #fff !important;
            color: #666 !important;
            line-height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 180px;
            height: 30px;
            margin-left: 10px;
        }

        body {
            padding-right: 0px !important;
            /* 强制设置右侧填充为0，这样弹窗的代码就改不动它了 */
            overflow-y: scroll !important;
            /* 所有页面都显示滚动条 */
        }
    </style>
</head>
<body>
    <!-- 导航条模块 -->
    <!-- 头部展示 -->
    <div class="x-nav">
        <!-- <span class="layui-breadcrumb"> -->
        <span class="goods_name">新建推送_立即发送</span>
        <!-- </span> -->
        <a class=" layui-btn-small goodsRoload" style="line-height:1.6em;margin-top:3px;" onclick="location.reload()"
            title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i> 刷新
        </a>
    </div>
    <div class="layui-fluid ">
        <div class="layui-row">
            <form class="layui-form">
                <!-- 第一行 -->
                <div class="layui-form-item">
                    <span class="text_title">通知标题：</span>
                    <div style="display: flex;">
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input note_title">
                        </div>
                        <div class="note_tem" data-toggle="modal" data-target="#detail_dialog">选择消息模板</div>
                    </div>
                </div>
                <!-- 第二行 -->
                <div class="layui-form-item">
                    <span class="text_title">通知内容：</span>
                    <div>
                        <div class="layui-input-block">
                            <!-- <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input"> -->
                            <textarea name="content" placeholder="请输入内容" class="layui-textarea note_content"></textarea>
                        </div>
                    </div>
                </div>
                <!-- 第三行 -->
                <div class="layui-form-item">
                    <span class="text_title">封面图片：</span>
                    <div>
                        <!-- 图片展示位置 -->
                        <div class="img_show">
                            <img src="#" alt="" onclick="previewImg(this)">
                        </div>
                        <div class="layui-input-block" style="display: flex; justify-content: start;">
                            <button type="button" class="layui-btn upload_img" id="test1">
                                上传
                            </button>
                            <p class="de_img">删除</p>
                        </div>
                    </div>
                </div>
                <!-- 第四行 -->
                <div class="layui-form-item">
                    <span class="text_title">发送时间：</span>
                    <div>
                        <div class="layui-input-block" style="display: flex;">
                            <input type="radio" name="sendType" value="1" title="立即发送">
                            <input type="radio" name="sendType" value="2" title="定时发送" checked>
                            <span class="send_time">发送时间:</span>
                            <input type="text" class="layui-input" id="test2" name="sendTime"
                                style="background-color: #fff !important;">

                        </div>
                    </div>
                </div>
                <!-- 第五行 -->
                <div class="layui-form-item">
                    <span class="text_title">消息备注：</span>
                    <div style="display: flex;">
                        <div class="layui-input-block">
                            <input type="text" name="remarks" required lay-verify="required" placeholder=""
                                autocomplete="off" class="layui-input note_remarks">
                            <span style="color: #ccc;font-size: 13px;
                        margin-top: 5px;">不在App前端显示</span>
                        </div>
                    </div>
                </div>
                <!-- 第六行 -->
                <div class="layui-form-item"
                    style="margin-top: 100px;   padding-bottom: 40px;text-align: center;margin-left: -156px;">
                    <div class="layui-input-block">
                        <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">下一步</button>
                        <button class="layui-btn submit_btn" type="button" lay-submit
                            lay-filter="formDemo1">保存为消息模板</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 消息模板的弹窗 -->
    <div class="modal inmodal fade" id="detail_dialog" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content br8">
                <div class="modal-header p10 bdno">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <span class="modal-title f18">选择消息模板</span>
                </div>
                <div class="modal-body bg_f p0">
                    <div class="ibox-content p30">
                        <!-- 标题搜索 -->
                        <div style="display: flex;">
                            <div class="modal_input">
                                <div class="input-group">
                                    <input type="text" class="form-control title_input" placeholder="标题搜索"
                                        style="width: 200px;">
                                    <span class="input-group-btn queryButton">
                                        <button class="btn btn-default title_btn" type="button"><span
                                                class="glyphicon glyphicon-search"></span></button>
                                    </span>
                                </div>
                            </div>
                            <!-- 备注搜索 -->
                            <div class="modal_input" style="margin-left: 50px;">
                                <div class="input-group">
                                    <input type="text" class="form-control remark_input" placeholder="备注搜索"
                                        style="width: 200px;">
                                    <span class="input-group-btn queryButton">
                                        <button class="btn btn-default remark_btn" type="button"><span
                                                class="glyphicon glyphicon-search"></span></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!-- 消息模板列表 -->
                        <div class="modal_list" style="margin-top: 20px;">
                            <div class="pull-left w100p">
                                <table class="table table-bordered mb0 ">
                                    <thead>
                                        <tr>
                                            <th>标题</th>
                                            <th>内容</th>
                                            <th>新建时间</th>
                                            <th>备注</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody_list1">
                                    </tbody>
                                </table>
                            </div>
                            <div class="pull-left tac c0 f14 w100p pre mt10" id="footer_page_div">
                                <div class="">
                                    <!-- 操作分页 -->
                                    <span class="under_line cursor_pointer f_last_span">上一页</span>
                                    <span class="pl20 f_page_span">1</span>
                                    <span class="pl20 under_line cursor_pointer f_next_span">下一页</span>
                                    <span class="pl20">共 <span class="f_count_page_span">1</span> 页</span>
                                    <div class="disib ml20">
                                        每页显示：
                                        <select class="p0 disib f_page_select">
                                            <option value="" selected="selected">10</option>
                                            <option value="">20</option>
                                            <option value="">30</option>
                                        </select>
                                        条
                                    </div>
                                </div>
                                <div class="record_right_div">
                                    数据库总数量： <span class="f_counts_span">0</span> 条
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer bdno tac pt0040" style="margin-top:10px;">

                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 使用layui的方法
    layui.use(['layedit', 'laydate', 'table', 'form', 'upload'],
        function () {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;
            var upload = layui.upload;

            laydate.render({
                elem: '#chooseTim'   //搜索时间框
            });
            laydate.render({
                elem: '#test2',//指定元素
                type: 'datetime'
            });
            var remarks, title;
            var userMessage = JSON.parse(sessionStorage.getItem("user_message"));
            //执行实例
            var cover_img = '';
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , headers: {
                    'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                }
                , url: uploadImgUrls //上传接口
                , done: function (res) {
                    if (res.code == 0) {
                        cover_img = res.root
                        $('.img_show').css('display', 'block');
                        $('.de_img').css('display', 'block');
                        $('.img_show img').attr('src', imgUrl + cover_img)
                        $('.upload_img').text('替换');

                        // console.log(cover_img)
                    } else {
                        layer.msg('上传失败，请重新上传');
                    }

                }
                , error: function () {
                    layer.msg('上传失败，请重新上传');
                }
            });

            // 点击删除封面
            $('.de_img').on('click', function () {
                swal({
                    title: "请再次确认是否删除？",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的，确定删除",
                    cancelButtonText: "让我再考虑一下…",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (yes) {
                    $('.img_show').css('display', 'none');
                    $('.de_img').css('display', 'none');
                    $('.upload_img').text('上传');
                    cover_img = '';
                    swal({
                        title: "删除成功",
                        text: "删除成功",
                        type: "success",
                    });
                })
            })

            var tableTimeout, addTimeout, setPowerTime, editManageTimeout, deleteTimeOut, getPowerTime,
                limits = 10,
                page = 1,
                counts = 0
            var totalPages = 0;
            var maxIndex;
            // 分页操作
            InitTbodyList(page);  //初始化列表数据
            //分页部分的操作
            $(".f_page_select").change(function () { //选择一页多少条数据的select
                page = 1; //重置页数
                $(".f_page_span").html(1); //重置页数
                limits = $(".f_page_select option:selected").text(); //设置当前显示数量
                InitTbodyList(page);
            });

            $(".f_last_span").click(function () { //上一页
                if (page < 2) {
                    TipsAlert("这是最前面的数据了");
                    return false;
                }
                page--;
                $(".f_page_span").html(parseInt($(".f_page_span").html()) - 1);
                InitTbodyList(page);
            });
            $(".f_next_span").click(function () { //下一页

                if (page > maxIndex - 1) {
                    TipsAlert("这是最后面的数据了");
                    return false;
                }
                page++;
                $(".f_page_span").html(parseInt($(".f_page_span").html()) + 1);
                InitTbodyList(page);
            });

            //消息模板点击搜索
            // 标题
            $(".title_btn").click(function () {   //查询按钮
                title = $('.title_input').val();
                remarks = '';
                page = 1; //重置页数
                $(".f_page_span").html(1); //重置页数
                $("#tbody_list1").html('');
                $(".nonetext").hide();
                InitTbodyList(page); //获取列表数据
            });
            //备注
            $(".remark_btn").click(function () {   //查询按钮
                title = '';
                remarks = $('.remark_input').val();
                page = 1; //重置页数
                $(".f_page_span").html(1); //重置页数
                $("#tbody_list1").html('');
                $(".nonetext").hide();
                InitTbodyList(page); //获取列表数据
            });
            //消息模板列表
            function InitTbodyList(startIndex) {
                var tableHtml = "";
                $.ajax({
                    type: "get",
                    url: urls + 'sysPushTemplate/templatePage',
                    async: true,
                    timeout: 30000,
                    dataType: "json",
                    headers: {
                        'X-Access-Token': userMessage.token,
                    },
                    data: {
                        page: startIndex,
                        limit: limits,
                        title: title,
                        remarks: remarks
                    },
                    success: function (res) {
                        CheckLogout(res); //检查是否登陆过期
                        if (res.code == 0) {
                            // InitTime();
                            totalPages = res.data.records.total;
                            var myData = res.data.records;
                            counts = res.data.total;
                            if (counts == 0) { //显示或隐藏分页
                                $("#footer_page_div").hide();
                                $(".nonetext").show();
                                InitTime();
                                return
                            } else {
                                $("#footer_page_div").show();
                            }
                            maxIndex = (counts / limits).toCeil(0);
                            $(".f_count_page_span").html(maxIndex); //设置当前共几页  
                            $(".f_counts_span").html(counts);

                            for (var i = 0; i < myData.length; i++) {
                                tableHtml += '<tr>' +
                                    '<td data-title=' + myData[i].title + ' data-content="' + myData[i].content + '" data-photo="' + myData[i].cover_photo_url + '" data-sentType="' + myData[i].send_type + '" data-sendTime="' + myData[i].send_time + '"  data-remarks="' + myData[i].remarks + '"  >' + myData[i]["title"] + '</td>' +
                                    '<td class="c_1ABC9C">' + myData[i]["content"] + '</td>' +
                                    '<td >' + myData[i]["create_time"] + '</td>' +
                                    '<td>' + myData[i]["remarks"] + '</td>' +
                                    '<td>' +
                                    '<span class="under_line cursor_pointer c_1ABC9C note_sure"  data-dismiss="modal" >确定</span>' +
                                    '</td>' +
                                    '</tr>';
                            }
                            $("#tbody_list1").html(tableHtml);
                            InitFunc()
                        } else {
                            TipsAlert(res.msg);
                        }
                        // InitFunc();
                    },
                    error: function (xml, text, errorThrown) {
                        if (text == "timeout") {
                            TipsAlert("请求超时,请检查网络或着重新打开该页面.");
                        } else {
                            TipsAlert("请求数据失败,请联系后台技术人员");
                        }
                        InitTime();
                    }
                });
            }

            function InitFunc() {
                $(".note_sure").each(function () {   //详情
                    $(this).click(function () {
                        var dataset = $(this).parents("td").siblings("td").eq(0)[0].dataset;
                        console.log(dataset)
                        $('.note_title').val(dataset.title)
                        $('.note_content').val(dataset.content)
                        $('.note_remarks').val(dataset.remarks)
                        if (dataset.photo) {  //封面图
                            $('.img_show').css('display', 'block');
                            $('.de_img').css('display', 'block');
                            $('.img_show img').attr('src', imgUrl + dataset.photo)
                            $('.upload_img').text('替换');
                        }
                        var radio = document.getElementsByName("sendType");
                        if (dataset.senttype == 1) {
                            $(radio[0]).next('div').click();
                            $('#test2').val('');
                        } else if (dataset.senttype == 2) {
                            $(radio[1]).next('div').click();
                            $('#test2').val(dataset.sendtime)
                        }
                        //这里处理新建消息页面的渲染
                        swal({
                            title: "选择消息模板成功",
                            type: "success",
                        });
                    });
                });
            }
            //点击按钮监听提交事件 下一步
            form.on('submit(formDemo)', function (data) {
                if (data.field.sendType == 1 && $('#test2').val() !== '') {
                    TipsAlert("选择立即发送,发送时间框必须清空！");
                    return;
                }
                var dataList = {};
                dataList.title = data.field.title;
                dataList.content = data.field.content;
                dataList.coverPhotoUrl = cover_img;
                dataList.sendType = data.field.sendType
                if (data.field.sendType == 2) {
                    dataList.sendTime = data.field.sendTime
                }
                dataList.remarks = data.field.remarks
                // console.log(data.field)
                // console.log(dataList)
                $.ajax({
                    type: 'post',
                    url: urls + 'sysNewsPush/newPushSave',
                    dataType: 'JSON',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(dataList),
                    headers: {
                        'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                    },
                    success: function (res) {
                        CheckLogout(res); //检查是否登陆过
                        if (res.code == 0) {
                            //成功跳转到发送页面
                            swal({
                                title: "新建推送成功！",
                                text: "新建推送成功！",
                                type: "success",
                            }, function () {
                               
                                window.location.href = './msgSendUser.html?id=' + res.data;
                            })
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (res) {

                    }
                })
            })

            // 点击保存到消息模板
            form.on('submit(formDemo1)', function (data) {
                if (data.field.sendType == 1 && $('#test2').val() !== '') {
                    TipsAlert("选择立即发送,发送时间框必须清空！");
                    return;
                }
                var dataList = {};
                dataList.title = data.field.title;
                dataList.content = data.field.content;
                dataList.coverPhotoUrl = cover_img;
                dataList.sendType = data.field.sendType
                if (data.field.sendType == 2) {
                    dataList.sendTime = data.field.sendTime
                }
                dataList.remarks = data.field.remarks
                // console.log(data.field)
                // console.log(dataList)
                $.ajax({
                    type: 'post',
                    url: urls + 'sysPushTemplate/sysPushTemplateSave',
                    dataType: 'JSON',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(dataList),
                    headers: {
                        'X-Access-Token': JSON.parse(sessionStorage.getItem("user_message")).token,
                    },
                    success: function (res) {
                        CheckLogout(res); //检查是否登陆过
                        if (res.code == 0) {
                            //成功跳转到发送页面
                            swal({
                                title: " 保存模板成功！",
                                text: "保存模板成功！",
                                type: "success",
                            })
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (res) {
                    }
                })
            })
        })
</script>
<script>
    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [500 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
            }
        });
    }
</script>
</html>